<template>
    <div class="ratings">
        <div class="ratings-content">
            <div class="overview">
                <div class="overview-left">
                    <div class="totalRate">{{seller.score}}</div>
                    <div class="rate">综合评分</div>
                    <div class="desc">高于周边商家{{seller.rankRate}}%</div>
                </div>
                <div class="overview-right">
                    <div class="foodStar">
                        <div class="desc">食品评价</div>
                        <div class="star-wrap">
                            <div class="star">★★★★★</div>
                            <div class="star2" :style="{width:foodscore}">★★★★★</div>
                        </div>
                        <div class="score">{{seller.foodScore}}</div>
                    </div>
                    <div class="serviceStar">
                        <div class="desc">服务态度</div>
                        <div class="star-wrap">
                            <div class="star">★★★★★</div>
                            <div class="star2" :style="{width:servicescore}">★★★★★</div>
                        </div>
                        <div class="score">{{seller.serviceScore}}</div>
                    </div>
                    <div class="deliveryTime">
                        <div class="time">送达时间</div>
                        <span class="deliveryT">{{seller.deliveryTime}}分钟</span>
                    </div>
                </div>
            </div>
            <div class="split"></div>
            <div class="ratingSelect">
                <div class="all">全部</div>
                <div class="satisfied">满意</div>
                <div class="unsatisfied">不满意</div>
            </div>
            <div class="only">
                <div class="yes">√</div>
                <div class="desc">只看有内容的评价</div>
            </div>
            <div class="rating-wrapper">
                <ul>
                    <li v-for="(rating, i) in this.ratings[0].foods[0].ratings" :key="rating.username" class="rating-content">
                        <div class="avatar">
                            <img :src="rating.avatar" alt="">
                        </div>
                        <div class="content">
                            <div class="username">{{rating.username}}</div>
                            <div class="time">{{time[i]}}</div>
                            <div class="userStar">
                                <div class="star-wrap">
                                    <div class="star">★★★★★</div>
                                    <div class="star2" :style="{width:foodscore}">★★★★★</div>
                                </div>
                            </div>
                            <div class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</div>
                            <div class="text" v-show="rating.text">
                                {{rating.text}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ['seller'],
  computed: {
    foodscore () {
      let score = this.seller.foodScore * 20 + '%'
      return score
    },
    servicescore () {
      let score = this.seller.serviceScore * 20 + '%'
      return score
    },
    time () {
      let b = []
      this.rates.forEach(item => {
        let a = new Date(item.rateTime)
        let c =
          a.toLocaleDateString().replace(/\//g, '-') +
          ' ' +
          a.toTimeString().substr(0, 8)
        b.push(c)
      })
      return b
    }
  },
  data () {
    return {
      ratings: [],
      rates: []
    }
  },
  created () {
    this.$http.get('http://goodsdata.wazaxa.club/', {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
        this.ratings = res.body.goods
        this.rates = this.ratings[0].foods[0].ratings
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../../common/scss/basees.scss";
.ratings {
  position: absolute;
  top: 174px;
  bottom: 0;
  left: 0;
  width: 100%;
  .overview {
    display: flex;
    padding: 18px 0;
    .overview-left {
      flex: 0 0 137px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .totalRate {
        font-size: 24px;
        color: rgb(255, 153, 0);
        line-height: 28px;
      }
      .rate {
        font-size: 12px;
        color: rgb(7, 17, 27);
        line-height: 12px;
        margin: 6px 0 8px 0;
      }
      .desc {
        font-size: 10px;
        color: rgb(147, 153, 159);
        line-height: 10px;
      }
    }
    .overview-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      padding-left: 24px;
      padding-right: 24px;
      .foodStar {
        display: flex;
        .desc {
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 18px;
          font-weight: 700;
        }
        .star-wrap {
          margin: 0 12px;
          width: 65.28px;
          position: relative;
          .star {
            color: rgb(147, 153, 159);
            position: absolute;
            top: -2px;
            left: 0;
          }
          .star2 {
            color: orange;
            position: absolute;
            top: -2px;
            left: 0;
            overflow: hidden;
          }
        }
        .score {
          font-size: 12px;
          color: orange;
          line-height: 18px;
        }
      }
      .serviceStar {
        margin: 8px 0;
        display: flex;
        .desc {
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 18px;
          font-weight: 700;
        }
        .star-wrap {
          margin: 0 12px;
          width: 65.28px;
          position: relative;
          .star {
            color: rgb(147, 153, 159);
            position: absolute;
            top: -2px;
            left: 0;
          }
          .star2 {
            color: orange;
            width: 80%;
            position: absolute;
            top: -2px;
            left: 0;
            overflow: hidden;
          }
        }
        .score {
          font-size: 12px;
          color: orange;
          line-height: 18px;
        }
      }
      .deliveryTime {
        display: flex;
        .time {
          font-size: 12px;
          color: rgb(7, 17, 27);
          font-weight: 700;
          line-height: 18px;
        }
        .deliveryT {
          font-size: 12px;
          color: rgb(147, 153, 159);
          line-height: 18px;
          margin-left: 12px;
        }
      }
    }
  }
  .split {
    width: 100%;
    height: 18px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #ddd;
  }
  .ratingSelect {
    margin: 18px;
    display: flex;
    align-items: center;
    .all {
      color: #fff;
      background-color: rgb(0, 160, 220);
      font-size: 12px;
      border-radius: 2px;
      line-height: 16px;
      text-align: center;
      padding: 8px 12px;
    }
    .satisfied {
      font-size: 12px;
      color: rgb(77, 85, 93);
      background-color: rgba(0, 160, 220, 0.2);
      line-height: 16px;
      text-align: center;
      padding: 8px 12px;
      margin: 0 8px;
    }
    .unsatisfied {
      font-size: 12px;
      color: rgb(77, 85, 93);
      background-color: rgba(77, 85, 93, 0.2);
      line-height: 16px;
      text-align: center;
      padding: 8px 12px;
    }
  }
  .only {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    .yes {
      background-color: rgb(147, 153, 159);
      font-size: 16px;
      width: 16px;
      height: 16px;
      color: #fff;
      border-radius: 50%;
      margin-right: 4px;
      line-height: 16px;
      text-align: center;
    }
    .desc {
      font-size: 12px;
      color: rgb(147, 153, 159);
      line-height: 24px;
    }
  }
  .rating-wrapper {
    .rating-content {
      display: flex;
      position: relative;
      .avatar {
        width: 28px;
        height: 28px;
        margin: 18px 12px 0 18px;
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
      }
      .content {
        padding: 18px 0;
        border-bottom: 1px solid #ccc;
        .username {
          font-size: 10px;
          color: rgb(7, 17, 27);
          line-height: 12px;
        }
        .time {
          font-size: 10px;
          font-weight: 200;
          color: rgb(147, 153, 159);
          line-height: 12px;
          position: absolute;
          right: 18px;
          top: 18px;
        }
        .userStar {
          display: flex;
          .star-wrap {
            margin: 4px 6px 6px 0;
            width: 65.28px;
            position: relative;
            .star {
              color: rgb(147, 153, 159);
            }
            .star2 {
              color: orange;
              position: absolute;
              top: 0;
              left: 0;
              overflow: hidden;
            }
          }
        }
        .delivery {
          font-size: 10px;
          font-weight: 200;
          color: rgb(147, 153, 159);
          line-height: 12px;
        }
        .text {
          font-size: 12px;
          color: rgb(7, 17, 27);
          font-weight: 700;
          line-height: 18px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
